<template>
	<view class="page">
		<view class="header">
			<!-- 搜索功能开始 -->
			<view class="uni-search-box">
				<uni-search-bar ref="searchBar" radius="150" cancelButton="none" disabled placeholder="搜索科室,医生"/>
			</view>
			<!-- 搜索功能结束 -->
		</view>
		<view class="classify_wrap">
			<!-- 横向分类滚动开始 -->
			<view class="classify_scroll_x">
				<scroll-view scroll-x="true" >
					<view class="segmented-wrap">
						<uni-segmented-control :current="current" :values="classify" @clickItem="onClickItem"styleType="text" activeColor="#CC0000"></uni-segmented-control>						
					</view>
				</scroll-view>
			</view>
			<!-- 横向分类滚动结束 -->
			
		 </view>
		<!-- 首页分类显示结束 -->
		
		<view class="content">
					<view v-if="current === 0">
						<!-- 轮播图开始 -->
						<view class="uni-margin-wrap">
							<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">
								<view v-if="error">{{error.message}}</view>
								<view v-else>
									<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
										:duration="duration">
										<swiper-item v-for="(item, index) in data" :key="item._id">
											<view class="swiper-item">
												<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
											</view>
										</swiper-item>
									</swiper>
								</view>
							</unicloud-db>
						</view>
						<!-- 轮播图结束 -->
						<!-- 会员权益开始 -->
						<view class="vip-wrap">
							<uni-card title="会员权益" :thumbnail="zuanshi" margin="5px"  >
								<!-- 权益列表开始 -->
								<uni-grid :column="column" :show-border="false" :square="false">
									<uni-grid-item v-for="(item, index) in vipItem">
										<view class="grid-item-box">
											<image :src="item.icon" style="width: 200rpx; height: 200rpx;" mode="aspectFill"></image>
											<text>{{ item.text }}</text>
										</view>
									</uni-grid-item>
								</uni-grid>	
								<!-- 权益列表结束 -->
							</uni-card>
						</view>
						<!-- 会员权益结束 -->
						<!-- 医生列表开始 -->
						<view class="doctor_list">
							<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctorinfo">
								<view v-if="error">{{error.message}}</view>
								<view v-else>
									<uni-list>
										<uni-list-item v-for="(item, index) in data">
										  <template v-slot:header>
										    <view class="slot-box">
										      <image class="slot-image" :src="item.doctorPicture.url" mode="widthFix"></image>
										    </view>
										  </template>
										  <template v-slot:body>
										      <view class="doctorName">
										        <text>{{item.doctorName}}</text>
										      </view>
										      <view class="doctorLecel">
										        <text>职称 | {{ item.doctorLecel }}</text>
										        <text>科室 | {{ item.department }}</text>
										      </view>
											  <view class="goodat">
												  <text>主治：{{item.goodat}}</text>
											  </view>
										      <view class="fee">
										        <text class="fee">¥ {{ getYuan(item.fee) }}</text>
										        <text>&nbsp;</text>
										      </view>
										    </template>
										</uni-list-item>
									</uni-list>
								</view>
							</unicloud-db>
						</view>
						<!-- 医生列表结束 -->
					</view>
					<view v-if="current === 1">
						<!-- 网上看病开始 -->
						<!-- 宫格开始 -->
						<view class="outpatient">
							<uni-card title="门诊业务" margin="5px"  >
								<!-- 业务宫格开始 -->
								<uni-grid :column="column" :show-border="false" :square="false">
								    <uni-grid-item v-for="(item, index) in outpatient" :key="index">
								      <view class="grid-item-box2">
								        <image :src="item.icon" style="width: 175rpx; height: 175rpx;" mode="aspectFill"></image>
								        <text class="grid-item-text">{{ item.text }}</text>
								      </view>
								    </uni-grid-item>
								  </uni-grid>
								  <!-- 业务宫格结束 -->
								  </uni-card>
						</view>
								  
						<view class="InHospital">
							<uni-card title="住院业务" margin="5px"  >
								<!-- 业务宫格开始 -->
								<uni-grid :column="column" :show-border="false" :square="false">
								    <uni-grid-item v-for="(item, index) in outpatient" :key="index">
								      <view class="grid-item-box2">
								        <image :src="item.icon" style="width: 175rpx; height: 175rpx;" mode="aspectFill"></image>
								        <text class="grid-item-text">{{ item.text }}</text>
								      </view>
								    </uni-grid-item>
								  </uni-grid>
								<!-- 业务宫格结束 -->
								</uni-card>
						</view>
						<!-- 宫格结束 -->
						<!-- 网上看病结束 -->
					</view>
					<view v-if="current === 2">
						<view class="serve">
							<uni-card title="特色服务" margin="5px"  >
								<!-- 其他开始 -->
								<uni-grid :column="number" :show-border="false" :square="false">
								    <uni-grid-item v-for="(item, index) in outpatient" :key="index">
								      <view class="grid-item-box2">
								        <image :src="item.icon" style="width: 175rpx; height: 175rpx;" mode="aspectFill"></image>
								        <text class="grid-item-text">{{ item.text }}</text>
								      </view>
								    </uni-grid-item>
								  </uni-grid>
								  <!-- 其他结束 -->
								  </uni-card>
						</view>
						
						<!-- 列表开始 -->
						<view class="Hospitalinfo">
							<uni-list>
								<uni-list-item title="医院介绍" note="河北医科大学第二医院是一所集医疗、教学、科研、预防、保健、康复、急救为一体的三级甲等综合医院，医院创建于1918年，现有院本部、东院区、北院区3个院区运行，正定院区正在建设中。医院总占地面积10.32万平方米，总建筑面积35.08万平方米。编制床位2816张，实际开放床位4126张。"></uni-list-item>
								<uni-list-item title="科室介绍" note="医院开设临床医技科室112个，有国家级临床重点专科9个,省级医学重点学科26个,省级质控中心15个,省级重点实验室7个(河北省血管稳态重点实验室、河北省血液病重点实验室、河北省神经病学重点实验室、河北省消化病实验室、河北省呼吸危重症重点实验室、河北省检验医学重点实验室、河北省不孕不育与遗传重点实验室)。"></uni-list-item>
								<uni-list-item title="挂号攻略" note="1.每张就诊卡限同时挂号三次，每个科室限挂一次；
								2.当天下午不可以预约当天时间号源；
								3.就诊卡号为“B”字开头的患者，暂时不支持线上预约挂号，请持就诊卡前往医院人工窗口办理预约就诊；
								4.请省医保慢性（特种）病认定的患者，预约时选择慢特病审核门诊科室；
								5.若患者需取消预约号，需在就诊日前一天下午16:00前取消。如果线上取消失败，需15天内携实体就诊卡到医院窗口申请退号退费；
								6.就诊卡办理地点为门诊楼1-7层办卡窗口，或一层自助机办理（医院官方公众号可无卡预约）
								7.如遇预约医师临时停诊，医院将调换其他同级别医师接诊，请留意手机信息通知。">
								</uni-list-item>
							</uni-list>
						</view>
						<!-- 列表结束 -->
					</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classify:["首页","网上看病","其他"],
				current:0,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				column: 3,
				number:2,
				zuanshi:'/static/logo.png',
				vipItem: [
					{ icon: '/static/hospital/chaxun.jpg'},
					{ icon: '/static/hospital/guahao.jpg'},
					{ icon: '/static/hospital/wenzhen.jpg'}
				],
				outpatient:[
					{ icon: '/static/outpatient/chongzhi.jpg'},
					{ icon: '/static/outpatient/menzhenjilu.jpg'},
					{ icon: '/static/outpatient/guahaojilu.jpg'},
					{ icon: '/static/outpatient/baogao.jpg'},
					{ icon: '/static/outpatient/yibao.jpg'},
					{ icon: '/static/outpatient/tuifei.jpg'}
				],
				InHospital:[
					{ icon: '/static/InHospital/chongzhi.jpg'},
					{ icon: '/static/InHospital/jilu.jpg'},
					{ icon: '/static/InHospital/qingdan.jpg'},
					{ icon: '/static/InHospital/bingli.jpg'},
					{ icon: '/static/InHospital/peihu.jpg'},
					{ icon: '/static/InHospital/baogao.jpg'}
				],
				serve:[
					{ icon: '/static/serve/jiancha.jpg'},
					{ icon: '/static/serve/jiankang.jpg'},
					{ icon: '/static/serve/tijian.jpg'},
					{ icon: '/static/serve/tijianbaogao.jpg'}
				],
			}
		},
		methods: {
			onClickItem(e) {
							if (this.current !== e.currentIndex) {
								this.current = e.currentIndex
							}
						},
			goToGrid(){
							uni.switchTab({
								url:'/pages/grid/grid'
							})
						},
			 getYuan(data){
					let yuan = Math.floor(data / 100)
					let fen = data % 100
					if(fen == 0) fen = "00"
					return yuan+'.'+fen
				  },
		}
	}
</script>

<style scoped>
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	.pages {
		background-color: #FFFFFF;
	}
	.header{
		display: flex;
		flex-direction: row;
		padding-left: 10px;
	}
	.locationName{
		display: flex;
		flex-direction: row;
		height: 50px;
		line-height: 50px;
		font-size: 12px;
	}
	.uni-search-box {
		background-color: #FFFFFF;
		height: 50px;
		width: 750rpx;
	}
	.uni-margin-wrap{
		margin-top: 5rpx;
	}
	.swiper{
		height: 315rpx;
	}
	.banner-image {
		width: 750rpx;
		height: 315rpx;
	}
	.grid-item-box {
		text-align: center;
		justify-content: center;
		padding: 20rpx 0 0 0;
	}
	.grid-item-box image{
		margin: 0 auto;
	}
	.classify_wrap{
		width: 100%;
		display: flex;
		flex-direction: row;
	}
	.classify_scroll_x{
		width: 750rpx;
		background-color: #FFFFFF;
		margin-top: 5rpx;
		margin-bottom: 8rpx;
		white-space: nowrap;
	}
	.slot-box {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	}
	
	.slot-image {
	  display: block;
	  margin-right: 10px;
	  width: 200rpx;
	  height: 200rpx;
	}
	.doctorName{
	  font-size: 30rpx;
	  display: -webkit-box;
	  line-height: 1.5em;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  margin-bottom: 5rpx;
	}
	.doctorLecel{
	  font-size: 24rpx;
	  white-space: nowrap; /* 禁止换行 */
	  overflow: hidden; /* 隐藏溢出内容 */
	  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
	  word-break: break-all; /* 允许在单词内换行 */
	  margin-bottom: 10rpx;
	  color: #666666;
	}
	.fee{
	  font-size: 40rpx;
	  color: #000000;
	}
	.department{
	  font-size: 24rpx;
	  color: #AAAAAA;
	  text-decoration-line: line-through;
	}
	.grid-item-box2 {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  text-align: center;
	}
	
	.grid-item-text {
	  margin-top: 10rpx;
	  font-size: 28rpx;
	}
	
</style>